<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>考核环节</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
<!-- 查询条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
    <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span
                    class="layui-icon layui-icon-search"></span>查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm"><span
                    class="layui-icon layui-icon-refresh-1"></span>重置
            </button>
        </div>

    </form>
</blockquote>
<!-- 查询条件结束-->

<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="courseTable" lay-filter="courseTable"></table>

    <div id="courseRowBar" style="display: none;">
        <button type="button" lay-event="set" class="layui-btn layui-btn-sm"><span
                class="layui-icon layui-icon-set"></span>设置
        </button>
        <button type="button" lay-event="average" class="layui-btn layui-btn-sm layui-bg-blue"><span
                class="layui-icon layui-icon-util"></span>设置平均成绩
        </button>
        <button type="button" lay-event="standard" class="layui-btn layui-btn-sm layui-btn-warm"><span
                class="layui-icon layui-icon-engine"></span>设计标准
        </button>


    </div>
</div>
<!-- 数据表格结束 -->
<!--设置弹出层开始-->
<div id="setDiv" style="display: none;">
    <table class="layui-hide" id="setTable" lay-filter="setTable"></table>
</div>

<div id="toolDemo" style="display: none;">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span
            class="layui-icon layui-icon-add-1"></span>添加
    </button>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="save">保存</a>
</script>
<!--设置弹出层结束-->

<!--设计标准弹出层开始-->
<div id="standardDiv" style="display: none;">
    <div id="table1" style="display: none;">
        <table class="layui-hide" id="standardTable1" lay-filter="standardTable1"></table>
    </div>
    <div id="table2" style="display: none;">
        <table class="layui-hide" id="standardTable2" lay-filter="standardTable2"></table>
    </div>
    <div id="table3" style="display: none;">
        <table class="layui-hide" id="standardTable3" lay-filter="standardTable3"></table>
    </div>
    <div id="table4" style="display: none;">
        <table class="layui-hide" id="standardTable4" lay-filter="standardTable4"></table>
    </div>
    <div id="table5" style="display: none;">
        <table class="layui-hide" id="standardTable5" lay-filter="standardTable5"></table>
    </div>
</div>
<script type="text/html" id="standardTablebar">
    <a class="layui-btn layui-btn-xs" lay-event="save">保存</a>
</script>
<!--设计标准弹出层结束-->

<!--设置平均成绩弹出层开始-->
<div id="averageDiv" style="display: none;">
    <table class="layui-hide" id="averageTable" lay-filter="averageTable"></table>
</div>
<!--设置平均成绩弹出层结束-->

<script type="text/javascript" src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['jquery', 'form', 'table', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;


        //表格加载
        tableIns = table.render({
            elem: '#courseTable'
            , url: '/courses/page'
            , toolbar: '#courseToolBar' //开启头部工具栏，并为其绑定左侧模板
            , title: '课程数据表'
            , height: 'full-280'
            , page: true
            , method: 'post'
            , cols: [
                [
                    {field: 'id', title: 'ID', align: 'center'}
                    , {field: 'name', title: '课程名称', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#courseRowBar', align: 'center'}
                ]
            ], done: function (res, curr, count) {
                count || this.elem.next('.layui-table-view').find('.layui-table-header').css('overflow', 'auto');
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: (curr - 1)
                        }
                    });
                }
            }
        });

        //条件查询监听
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });


        //监听行工具条的事件
        table.on("tool(courseTable)", function (obj) {
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'set':
                    openSetCourseLayer(data);
                    break;
                case 'standard':
                    standard(data);
                    break;
                case 'average':
                    average(data);
                    break;
            }
        });

        var courseId;

        //打开设置弹出层
        function openSetCourseLayer(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#setDiv"),
                area: ['1200px', '700px'],
                maxmin: true,
                shadeClose: true,
                title: '设置课程目标达成考核与评价方式及成绩评定对照表',
                success: function () {
                    courseId = data.id;
                    //动态表加载
                    loadTable(data);
                }
            });
        }

        var tableListIns;

        function loadTable(data) {

            var option = ''
            $.get("/courses/findGraduation/" + data.id, function (res) {
                $.each(res.data, function (index, item) {
                    option += " <option value=" + item.id + ">" + item.content + "</option>"
                });
            })


            //查询出动态列具体几列
            $.get("/checks/findCheckCols/" + data.id, function (res) {
                var cols = res.data.length;
                //动态列
                var dynamic = [];
                var line = '{'
                $.each(res.data, function (index, item) {
                    var i = index + 1;
                    var row = {
                        field: "check" + i,
                        title: item.name,
                        align: 'center',
                        edit: true,
                        totalRow: true
                    }
                    dynamic.push(row)
                });


                //设置table数据加载表头设置
                var header = [
                    [//第一行表头
                        {
                            field: 'target',
                            title: '课程目标',
                            align: 'center',
                            rowspan: 2,
                            edit: true,
                            totalRowText: '列最值'
                        }
                        , {
                        field: 'graduationId',
                        title: '支持毕业要求',
                        align: 'left',
                        rowspan: 2,
                        // edit: true,
                        width: 250
                        , templet: function (d) {
                            //查询并返回下拉
                            var str = '<a lay-event="graduationId"></a><select name="graduationId" lay-filter="graduationId" lay-verify="required" data-value="' + d.graduationId + '" >'
                                + option
                                + '</select>'
                            return str;
                        }
                    }
                        , {field: '', title: '考核与评价方式及成绩比例', colspan: cols, align: 'center', edit: true}
                        , {field: 'results', title: '成绩比例', align: 'center', rowspan: 2, edit: true, totalRow: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', rowspan: 2, fixed: 'right', width: 200}
                    ]
                ]
                header.push(dynamic);//加入第二行表头


                //查询data[]              带参:课程ID  更具课程ID查询表3相关信息
                var listData;

                $.get("/checkevaluations/findBycourseId/" + data.id, function (res) {
                    listData = res.data;

                //设置table数据加载
                tableListIns = table.render({
                    elem: '#setTable'
                    , id: "setTable"
                    , data: listData
                    // , url: "/checkevaluations/findBycourseId/" + data.id
                    , height: 'full-300'
                    , size: 'lg'
                    , toolbar: '#toolDemo'
                    , title: '毕业要求数据表'
                    , totalRow: res.totalRow
                    , cols: header
                    , done: function (res, curr, count) {
                        layui.each($('select'), function (index, item) {
                            var elem = $(item);
                            elem.val(elem.data('value')).parents('div.layui-table-cell').css('overflow', 'visible');
                        });
                        // form.render('select', 'genSelect');
                        form.render('select');
                    }
                    /* ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                         return {
                             "code": res.code, //解析接口状态
                             "msg": res.msg, //解析提示文本
                             "count": res.count, //解析数据长度
                             "data": res.data, //解析数据列表
                             "totalRow": {
                                 "results": "666"
                             }
                         };
                     }*/
                });
            })


            })


        }

        table.on('edit(setTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            var data = obj.data;
            var check1 = data.check1;
            var check2 = data.check2;
            var check3 = data.check3;
            var check4 = data.check4;
            var check5 = data.check5;

            var num = 0;
            if (check1 != null && check1 != '' && check1 != undefined) {
                num +=  Number(check1);
            }
            if (check2 != null && check2 != '' && check2 != undefined) {
                num += Number(check2);
            }
            if (check3 != null && check3 != '' && check3 != undefined) {
                num += Number(check3);
            }
            if (check4 != null && check4 != '' && check4 != undefined) {
                num +=  Number(check4);
            }
            if (check5 != null && check5 != '' && check5 != undefined) {
                num +=  Number(check5);
            }
            $.extend(obj.data, {'results': num});
            updateRow(obj.data);	//更新行记录对象
        });




        function standard(data) {
            //必选先设置 平均成绩
            $.get("/checks/findCheckColsIsOk/" + data.id, function (res) {
                if (res.code == -1) {
                    layer.msg("请先设置平均成绩");
                } else {
                    layerIndex = layer.open({
                        type: 1,
                        content: $("#standardDiv"),
                        area: ['1200px', '700px'],
                        maxmin: true,
                        shadeClose: true,
                        title: '评判标准',
                        success: function () {
                            var i = 1;
                            while (i <= 5) {
                                $("#table" + i).hide();
                                i++;
                            }
                            //更具课程ID查询 每个考核环节的考核与评价标准 表
                            $.get("/courses/findStandard/" + data.id, function (res) {
                                //循环设置table1-5
                                $.each(res.data, function (index, item) {
                                    var j = index + 1;
                                    $("#table" + j).show();
                                    table.render({
                                        elem: '#standardTable' + j
                                        , id: "standardTable" + j
                                        , data: item
                                        , title: '数据表'
                                        , width: 1180
                                        , cols: [
                                            [
                                                , {field: 'checkId', title: '考核环节ID', align: 'center', hide: true}
                                                , {
                                                field: 'checkevaluationId',
                                                title: '表3ID',
                                                align: 'center',
                                                hide: true
                                            }
                                                , {field: 'courseId', title: '课程ID', align: 'center', hide: true}
                                                , {field: 'name', title: '考核环节', align: 'center', edit: true}
                                                , {field: 'target', title: '基本要求', align: 'center', edit: true}
                                                , {field: 'excellence', title: '优秀', align: 'center', edit: true}
                                                , {field: 'fine', title: '良好', align: 'center', edit: true}
                                                , {field: 'qualified', title: '及格', align: 'center', edit: true}
                                                , {field: 'noQualified', title: '不及格', align: 'center', edit: true}
                                                , {fixed: 'right', title: '操作', toolbar: '#standardTablebar'}
                                            ]
                                        ]
                                    });
                                });
                            });
                        }
                    });
                }
            })
        }


        var averageTable;

        function average(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#averageDiv"),
                area: ['500px', '400px'],
                maxmin: true,
                shadeClose: true,
                title: '平均值',
                btn: ['<span class=layui-icon>&#xe605;确认</span>', '<span class=layui-icon>&#x1006;关闭窗口</span>'],
                yes: function (index, layero) {
                    var param = table.cache["averageTable"];
                    console.table(param)
                    //提交table  更新
                    $.each(param, function (index, item) {
                        $.post("/checks/update", item, function (res) {
                            if (!index) {
                                layer.msg(res.msg);
                            }
                        })
                    });
                },
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btnAlign: 'c',
                success: function () {
                    averageTable = table.render({
                        elem: '#averageTable'
                        , id: "averageTable"
                        , url: "/checks/findCheckCols/" + data.id
                        , title: '平均值数据表'
                        , cols: [
                            [
                                {field: 'name', title: '考核环节', align: 'center'}
                                , {field: 'average', title: '平均成绩', align: 'center', edit: true}
                            ]
                        ]
                    });
                }
            });
        }


        //监听工具条的事件
        table.on("toolbar(setTable)", function (obj) {
            switch (obj.event) {
                case 'add'://添加一行
                    var oldData = table.cache["setTable"];
                    var newRow = {target: '', courseId: courseId};
                    oldData.push(newRow);
                    tableListIns.reload({
                        data: oldData
                    });
                    break;
            }
            return false;
        });

        //监听 行   操作
        table.on('tool(setTable)', function (obj) {
            var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
            switch (event) {
                case "graduationId":
                    if ('' == data.target) {
                        $.extend(obj.data, {'graduationId': null});
                        updateRow(obj.data);	//更新行记录对象
                        layer.alert("课程目标不能为空")
                    } else {
                        var select = tr.find("select[name='graduationId']");
                        if (select) {
                            var selectedVal = select.val();
                            if (!selectedVal) {
                                layer.tips("请选择一个分类", select.next('.layui-form-select'), {tips: [3, '#FF5722']}); //吸附提示
                            }
                            $.extend(obj.data, {'graduationId': selectedVal});
                            updateRow(obj.data);	//更新行记录对象
                        }
                    }
                    break;
                case "del":
                    layer.confirm('真的删除行么？', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        if (undefined != data.id) {
                            //数据库真实存在的数据 做 真实删除
                            var url = "/checkevaluations/" + data.id;
                            $.ajax({
                                type: "delete",
                                url: url,
                                data: null,
                                dataType: "json",
                                async: false,
                                success: function (res) {
                                    layer.msg(res.msg);
                                }
                            });
                        }
                        layer.close(index);

                    });
                    break;

                case "save":
                    if ('' == data.target) {
                        layer.alert("课程目标不能为空")
                    } else {
                        console.log(data)
                        var url;
                        if (undefined != data.id) {
                            //更新
                            url = "/checkevaluations/update"
                        } else {
                            //创建
                            url = "/checkevaluations"
                        }
                        $.post(url, data, function (res) {
                            layer.msg(res.msg);
                        })
                    }
                    break;
            }
        });
        //监听select下拉选中事件
        form.on('select(graduationId)', function (data) {
            var elem = data.elem; //得到select原始DOM对象

            $(elem).prev("a[lay-event='graduationId']").trigger("click");
        });

        function updateRow(obj) {
            var oldData = table.cache["setTable"];
            for (var i = 0, row; i < oldData.length; i++) {
                row = oldData[i];
                if (row.target == obj.target) {
                    $.extend(oldData[i], obj);
                    break;
                }
            }
            console.log(oldData)
            tableListIns.reload({
                data: oldData
            });
        }

        //监听table1-5
        table.on('tool(standardTable1)', function (obj) {
            addAndUpdate(obj.data)
        })
        table.on('tool(standardTable2)', function (obj) {
            addAndUpdate(obj.data)
        })
        table.on('tool(standardTable3)', function (obj) {
            addAndUpdate(obj.data)
        })
        table.on('tool(standardTable4)', function (obj) {
            addAndUpdate(obj.data)
        })
        table.on('tool(standardTable5)', function (obj) {
            addAndUpdate(obj.data)
        })


        function addAndUpdate(data) {

            var url;
            if (null != data.id && undefined != data.id && '' != data.id) {
                //更新操作
                url = "/standards/update";
            } else {
                // 添加操作
                url = "/standards"
            }
            $.post(url, data, function (res) {
                layer.msg(res.msg);
            })
        }


    });
</script>
</body>
</html>